<template>
  <div  class="menu-wrapper">
    <ul class="header-nav-menu">
      <!-- <li class="header-nav-menu__item" route="home">
          <span class="header-nav-menu__item__title">首页</span>
      </li> -->
      <!-- <li class="header-nav-menu__item" >
        <span class="header-nav-menu__item__title">平台资讯</span>
        <ul class="header-nav-menu__sub__menu" style="display: none;">
            <li class="header-nav-sub-menu__item" route="noticlist"><span>新闻资讯</span></li>
            <li class="header-nav-sub-menu__item" route="change"><span>行政区划变更</span></li>
        </ul>
      </li> -->
      <li class="header-nav-menu__item"  route="xzqh">
        <span class="header-nav-menu__item__title">行政区划</span>
      </li>
      <li class="header-nav-menu__item"  route="search">
        <span class="header-nav-menu__item__title">国家地名信息库</span>
      </li>
      <li class="header-nav-menu__item"  route="change">
        <span class="header-nav-menu__item__title">行政区划变更</span>
      </li>
      <li class="header-nav-menu__item"  route="services">
        <span class="header-nav-menu__item__title">服务资源</span>
      </li>
      <!-- <li class="header-nav-menu__item" v-show="logined">
        <span class="header-nav-menu__item__title">数据管理</span>
        <ul class="header-nav-menu__sub__menu" style="display: none;">
          <li class="header-nav-sub-menu__item" route="addnews"><span>新闻管理</span></li> 
          <li class="header-nav-sub-menu__item" route="editprops"><span>属性管理</span></li>
          <li class="header-nav-sub-menu__item" route="editpois"><span>地名编辑</span></li>
        </ul>
      </li> -->
      <li class="header-nav-menu__item" route="contact">
        <span class="header-nav-menu__item__title" >关于</span>
        <!-- <ul class="header-nav-menu__sub__menu" style="display: none;">
          <li class="header-nav-sub-menu__item " route="contact"><span>联系我们</span></li>
        </ul>route="contactUs" -->
      </li>
    </ul>
  </div>
</template>
<script>
  import Bus from '../../src/bus.js';
  import $ from 'jquery';
  export default {
    components: {
    },
    data() {
      return {
        logined:false,
      }
    },
     mounted() {
       this.initMenu();
       Bus.$on('update_active', (route) => {
        if(route !=''){
          this.update_active(route);
        }
      })
       Bus.$on('login_change', (status) => {
        this.logined=status
      })
     },
    methods: {
      goUrl(item){
        this.$router.push({
          name: item,
        })
      },
      cancle_menu_acitve(){
        $(".header-nav-menu__item").removeClass('header-nav-menu__item__acitve')
        $(".header-nav-menu__item").find('.header-nav-sub-menu__item').removeClass('header-nav-menu__item__acitve')
      },
      initMenu()
      {
        let that=this;
        $(".menu-wrapper .header-nav-menu__item").hover(function(){
          let $sub__menu=$(this).find(".header-nav-menu__sub__menu")
          if($sub__menu.length>0){$sub__menu.show();}
        },function(){
          let $sub__menu=$(this).find(".header-nav-menu__sub__menu")
          if($sub__menu.length>0){$sub__menu.hide();}
        }).click(function(){
          let $sub__menu=$(this).find(".header-nav-menu__sub__menu")
          if($sub__menu.length==0){
            that.cancle_menu_acitve();//其他全部取消active
            that.goUrl($(this).attr("route"));//转入路由
            $(this).addClass("header-nav-menu__item__acitve");
          }
        });

        $(".menu-wrapper .header-nav-menu .header-nav-sub-menu__item").click(function(){
          that.cancle_menu_acitve();//其他全部取消active
          $(this).addClass("header-nav-menu__item__acitve");
          $(this).parent().parent().addClass("header-nav-menu__item__acitve");
          that.goUrl($(this).attr("route"));//转入路由
        });
      },
      update_active(route){
        this.cancle_menu_acitve();//其他全部取消active
        let $route=$(".header-nav-menu__item[route='"+route+"']")
        let $route2=$(".header-nav-menu__item .header-nav-sub-menu__item[route='"+route+"']")
        if($route2.length==1 ||$route.length==1){
          if($route2.length==1){
            $route2.addClass("header-nav-menu__item__acitve");
            $route2.parent().parent().addClass("header-nav-menu__item__acitve");
          }
          if($route.length==1){
            $route.addClass("header-nav-menu__item__acitve");
          }
        }
      },

      




    }
  }
</script>